<template>
  <div class="dataTable">
    <div style="width: 80%; height: 500px; min-width: 700" id="test"></div>
  </div>
</template>

<script>
import { getReportData } from "@/api/statistic";

export default {
  name: "dataTable",
  data() {
    return {
      title: "用户来源",
      legend: ["Email"],
      xlabel: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      series: [
        {
          name: "Email",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
      ],
    };
  },
  created() {
    this.getReportData();
  },
  methods: {
    getReportData() {
      getReportData().then(
        (res) => {
          this.legend = res.data.data.legend;
          this.series = res.data.data.series;
          this.xlabel = res.data.data.xlabel;
          this.initChar();
        },
        (err) => {
          console.warn(err);
        }
      );
    },
    initChar() {
      var myEchats = this.$echarts.init(document.getElementById("test")); //图标初始化

      myEchats.setOption({
        tooltip: {
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        title: { text: this.title },
        xAxis: [{ data: this.xlabel }],
        yAxis: [{}],
        legend: { data: this.legend },
        series: this.series,
      });

      window.addEventListener("resize", () => {
        myEchats.resize();
      });
    },
  },
};
</script>

<style  scoped>
.dataTable {
  padding: 20px;
}
</style>
